<template>
    <div class="home-body">
      <div class="galley-display">
        <div class="show-image">
          <img :src="singleBanner" alt="">
        </div>
      </div>
      <div class="today-sell">
        <div class="sell-content border">
          <div class="content-title border-bottom">
            <span>今日优选</span>
            <span class="go-more" @click="goBook">更多></span>
          </div>
          <div class="content-item" >
            <div class="item border-bottom">
              <div class="item-wrapper img-info border-right">
                <img src="@/assets/styles/image/book/cet.jpg" alt="">
              </div>
              <div class="item-wrapper text-info">
                <div class="item-title">
                  <span>星火英语四级真题试卷</span>
                </div>
                <div class="item-price">
                  <span>
                    ￥
                  </span>
                  <span class="price">10</span>
                </div>
                <div class="owner">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-geren"></use>
                  </svg>
                  <span>原来是狗剩啊</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-wrapper img-info border-right">
                <img src="@/assets/styles/image/book/cet.jpg" alt="">
              </div>
              <div class="item-wrapper text-info">
                <div class="item-title">
                  <span>星火英语四级真题试卷</span>
                </div>
                <div class="item-price">
                  <span>
                    ￥
                  </span>
                  <span class="price">10</span>
                </div>
                <div class="owner">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-geren"></use>
                  </svg>
                  <span>原来是狗剩啊</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="sell-content border">
          <div class="content-title border-bottom">
            <span>顺手帮帮</span>
            <span class="go-more" @click="goBook">更多></span>
          </div>
          <div class="content-item">
            <div class="item border-bottom">
              <div class="item-wrapper img-info border-right">
                <img src="@/assets/styles/image/book/cet4.jpg" alt="">
              </div>
              <div class="item-wrapper text-info">
                <div class="item-title">
                  <span>快递代领</span>
                </div>
                <div class="item-price">
                  <span>
                    ￥
                  </span>
                  <span class="price">10</span>
                </div>
                <div class="owner">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-geren"></use>
                  </svg>
                  <span>原来是狗剩啊</span>
                </div>
              </div>
            </div>
            <div class="item">
              <div class="item-wrapper img-info border-right">
                <img src="@/assets/styles/image/book/cet.jpg" alt="">
              </div>
              <div class="item-wrapper text-info">
                <div class="item-title">
                  <span>星火英语四级真题试卷</span>
                </div>
                <div class="item-price">
                  <span>
                    ￥
                  </span>
                  <span class="price">10</span>
                </div>
                <div class="owner">
                  <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-geren"></use>
                  </svg>
                  <span>原来是狗剩啊</span>
                </div>
              </div>
            </div>
          </div>
        </div>

      </div>
      <div class="footer-line">
        <span> —— </span>
        <span>别划啦！到底啦~</span>
        <span> —— </span>
      </div>
    </div>
</template>

<script>
    export default {
      name: "home-body",
      data () {
        return {
          singleBanner: 'http://pic.soutu123.com/back_pic/00/04/09/45562106ae6efad.jpg'
        }
      },
      methods: {
        goBook () {
          this.$router.push('/mall');
        }
      }
    }
</script>

<style scoped>
  .home-body {
    margin-bottom: 50px;
  }
  .galley-display {
    height: 0;
    padding-bottom: 30%;
    overflow: hidden;
  }
  .show-image {
    width: 92%;
    margin-left: 4%;
  }
  .show-image img {
    width: 100%;
    border-radius: 8px;
    box-shadow: 0 0 10px #8c8c8c;
  }

  .today-sell {
    padding: 10px 15px;
  }
  .sell-content {
    margin: 20px 0;
  }
  .sell-content:before {
    border-radius: 10px;
  }
  .content-title {
    padding: 15px 10px;
  }
  .content-title span:first-child {
    padding-left: 5px;
    border-left: 2px solid orangered;
  }
  .content-title:after {
    clear: both;
    content: '';
    display: block;
  }
  .go-more {
    float: right;
    padding: 0 5px;
    font-size: 14px;
    color: #127ea0;
    font-family: sans-serif;
    font-weight: 300;
  }
  .item  {
    display: flex;
  }
  .item-wrapper {
    width: 30%;
    padding: .2rem;
  }
  .text-info {
    width: 70%;
  }
  .img-info {
    margin-right: .3rem;
  }
  .img-info img {
    width: 100%;
  }
  .item-title {
    padding: 10px 5px;
    font-size: 16px;
    font-weight: 600;
    font-family: sans-serif;
  }
  .item-price {
    padding-left: 5px;
    padding-bottom: 10px;
  }
  .item-price span:first-child {
    color: #666;
    font-size: 12px;
  }
  .item-price span:last-child {
    color: #f00;
    font-size: 18px;
  }
  .owner span:last-child {
    font-size: 14px;
  }
  .more-data {
    padding: 10px;
    text-align: center;
    color: #fff;
    font-size: 15px;
    background: #f94937;
    border-bottom-left-radius: 7px;
    border-bottom-right-radius: 7px;
  }
  .footer-line {
    text-align: center;
    font-size: 14px;
    color: #666;
  }
</style>
